<!-- 系统配置 -->
<template>
    <div class="app-container">
        <div class="search-container">
            <el-form ref="queryFormRef" :model="queryParams" :inline="true">
                <el-form-item label="关键字" prop="keywords">
                    <el-input
                        v-model="queryParams.keywords"
                        placeholder="请输入配置键\配置名称"
                        clearable
                        @keyup.enter="handleQuery"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleQuery">
                        <i-ep-search />
                        搜索
                    </el-button>
                    <el-button @click="handleResetQuery">
                        <i-ep-refresh />
                        重置
                    </el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-card shadow="never" class="table-container">
            <template #header>
                <el-button v-hasPerm="['sys:config:add']" type="success" @click="handleOpenDialog()">
                    <i-ep-plus />
                    新增
                </el-button>
            </template>

            <el-table
                ref="dataTableRef"
                v-loading="loading"
                :data="pageData"
                highlight-current-row
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="index" label="序号" width="60" />
                <el-table-column key="configName" label="配置名称" prop="configName" min-width="100" />
                <el-table-column key="configKey" label="配置键" prop="configKey" min-width="100" />
                <el-table-column key="configValue" label="配置值" prop="configValue" min-width="100" />
                <el-table-column key="remark" label="描述" prop="remark" min-width="100" />
                <el-table-column fixed="right" label="操作" width="220">
                    <template #default="scope">
                        <el-button
                            v-hasPerm="['sys:config:update']"
                            type="primary"
                            size="small"
                            link
                            @click="handleOpenDialog(scope.row.id)"
                        >
                            <i-ep-edit />
                            编辑
                        </el-button>
                        <el-button
                            v-hasPerm="['sys:config:delete']"
                            type="danger"
                            size="small"
                            link
                            @click="handleDelete(scope.row.id)"
                        >
                            <i-ep-delete />
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <pagination
                v-if="total > 0"
                v-model:total="total"
                v-model:page="queryParams.pageCurrent"
                v-model:limit="queryParams.pageSize"
                @pagination="handleQuery"
            />
        </el-card>

        <!-- 系统配置表单弹窗 -->
        <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" @close="handleCloseDialog">
            <el-form ref="dataFormRef" :model="formData" :rules="rules" label-suffix=":" label-width="100px">
                <el-form-item label="配置名称" prop="configName">
                    <el-input v-model="formData.configName" placeholder="请输入配置名称" :maxlength="50" />
                </el-form-item>
                <el-form-item label="配置键" prop="configKey">
                    <el-input v-model="formData.configKey" placeholder="请输入配置键" :maxlength="50" />
                </el-form-item>
                <el-form-item label="配置值" prop="configValue">
                    <el-input v-model="formData.configValue" placeholder="请输入配置值" :maxlength="100" />
                </el-form-item>
                <el-form-item label="描述" prop="remark">
                    <el-input
                        v-model="formData.remark"
                        :rows="4"
                        :maxlength="100"
                        show-word-limit
                        type="textarea"
                        placeholder="请输入描述"
                    />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="handleSubmit">确定</el-button>
                    <el-button @click="handleCloseDialog">取消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
defineOptions({
    name: 'Config',
    inheritAttrs: false
})

import ConfigAPI, { ConfigPageVO, ConfigForm, ConfigPageQuery } from '@/api/config'

const queryFormRef = ref(ElForm)
const dataFormRef = ref(ElForm)

const loading = ref(false)
const ids = ref<number[]>([])
const total = ref(0)

const queryParams = reactive<ConfigPageQuery>({
    pageCurrent: 1,
    pageSize: 10,
    keywords: ''
})

// 系统配置表格数据
const pageData = ref<ConfigPageVO[]>([])

// 弹窗
const dialog = reactive({
    title: '',
    visible: false
})
// 系统配置表单
const formData = reactive<ConfigForm>({
    id: undefined,
    configName: '',
    configKey: '',
    configValue: '',
    remark: ''
})

const rules = reactive({
    configName: [{ required: true, message: '请输入系统配置名称', trigger: 'blur' }],
    configKey: [{ required: true, message: '请输入系统配置编码', trigger: 'blur' }],
    configValue: [{ required: true, message: '请输入系统配置值', trigger: 'blur' }]
})

/** 查询系统配置 */
function handleQuery() {
    loading.value = true
    ConfigAPI.getPage(queryParams)
        .then(data => {
            pageData.value = data.list
            total.value = data.total
        })
        .finally(() => {
            loading.value = false
        })
}
/** 重置系统配置查询 */
function handleResetQuery() {
    queryFormRef.value.resetFields()
    queryParams.pageCurrentrent = 1
    handleQuery()
}

/** 行复选框选中记录选中ID集合 */
function handleSelectionChange(selection: any) {
    ids.value = selection.map((item: any) => item.id)
}

/** 打开系统配置弹窗 */
function handleOpenDialog(id?: number) {
    dialog.visible = true
    if (id) {
        dialog.title = '修改系统配置'
        ConfigAPI.getFormData(id).then(data => {
            Object.assign(formData, data)
        })
    } else {
        dialog.title = '新增系统配置'
        formData.id = undefined
    }
}

/** 刷新缓存 **/
function handleRefreshCache() {
    ConfigAPI.refreshCache().then(() => {
        ElMessage.success('刷新成功')
    })
}

/** 提交系统配置表单 */
function handleSubmit() {
    dataFormRef.value.validate((valid: any) => {
        if (valid) {
            loading.value = true
            const id = formData.id
            if (id) {
                ConfigAPI.update(id, formData)
                    .then(() => {
                        ElMessage.success('修改成功')
                        handleCloseDialog()
                        handleResetQuery()
                    })
                    .finally(() => (loading.value = false))
            } else {
                ConfigAPI.add(formData)
                    .then(() => {
                        ElMessage.success('新增成功')
                        handleCloseDialog()
                        handleResetQuery()
                    })
                    .finally(() => (loading.value = false))
            }
        }
    })
}

/** 关闭系统配置弹窗 */
function handleCloseDialog() {
    dialog.visible = false
    dataFormRef.value.resetFields()
    dataFormRef.value.clearValidate()
    formData.id != undefined
}

/** 删除系统配置 */
function handleDelete(id: number) {
    ElMessageBox.confirm('确认删除该项配置?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(
        () => {
            loading.value = true
            ConfigAPI.deleteById(id)
                .then(() => {
                    ElMessage.success('删除成功')
                    handleResetQuery()
                })
                .finally(() => (loading.value = false))
        },
        () => {}
    )
}

onMounted(() => {
    handleQuery()
})
</script>
